<script>
import treeCom from "@/view/traffic/studentCom/treeCom.vue";
import tableMixins from "@/mixins/tableMixins.vue"
import studentCountAdd from "@/view/traffic/studentCom/studentCountAdd.vue";
import * as u from '@/util/util'

export default {
  name: "studentCount",
  mixins: [tableMixins],
  data() {
    let that = this;
    return {
      url: "t-student-trip-statistics",
      //弹框回显
      dialogVisible: false,
      //菜单集合
      menuList: [],
      treeData:[],
      checkTreeNode: {},
      changeNode:{
        schoolList:[],
        gradeList:[],
        districtNode:'',
        schoolNode:'',
        gradeNode:''
      },
      //选中
      checked: [],
      //部门树
      deptTree: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      tableOption: {
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 50,
        stripe: true,
        align: 'center',
        addBtn: false,
        searchMenuSpan: 6,
        labelWidth: 280,
        searchLabelWidth: 200,
        height: '600px',
        calcHeight: 400,
        dialogWidth: 900,
        menuWidth: 200,
        menuAlign: 'center',
        editBtn: u.buttonPermissionsCheck("SYS_ROLE_DEL"),
        column: [
          {
            prop: 'tripCode',
            label: 'ID',
            hide: true,
            addDisplay: false,
            editDisplay: false
          },
          {
            prop: 'districtCode',
            label: '学校所在村(社区)',
            type: 'tree',
            overHidden: true,
            minWidth: 60,
            maxlength: 200,
            span: 24,
            dicUrl: "/t-district/findTree",
            dicFilter: 'leaf',
            props: {
              label: "districtName",
              value: "districtCode",
            },
            change:(res)=>{
              let districtCode = res.value;
              if (!res.item) districtCode = this.form.districtCode;
              let dic = this.changeNode.schoolList.filter(x=>{
                return x.districtCode === districtCode;
              })
              this.$refs.crud.updateDic('schoolCode',dic)
            }
          },
          {
            prop: 'schoolName',
            label: '学校名称',
            type: 'select',
            overHidden: true,
            minWidth: 60,
            maxlength: 200,
            span: 24,
            dicUrl: `/t-school/findPage`,
            props: {
              label: "schoolName",
              value: "schoolCode",
            },
            dicFormatter:(res)=>{
              return res.records
            },
            change:(res)=>{
              let schoolCode = res.value;
              schoolCode = res.value;
              if (!res.item)  schoolCode = this.form.schoolCode;
              let dic = null;
              this.changeNode.schoolList.forEach(item=>{
                if (item.schoolCode == schoolCode) dic = item.children
              })
              this.changeNode.gradeList = dic;
              // this.$set(this.searchForm, "schoolCode", schoolCode);
              // this.$set(this.searchForm, "districtCode", this.searchForm.schoolDistrictName);
              this.$refs.crud.updateDic('grade',dic)
            }
          },
          {
            prop: 'grade',
            label: '年级',
            type: 'select',
            overHidden: true,
            minWidth: 60,
            maxlength: 200,
            span: 24,
            props: {
              label: "name",
              value: "id",
            },
            change:(res)=>{
              let gradeId = res.value;
              let dic = null;
              if (!res.item)  gradeId = this.form.grade;
              this.changeNode.gradeList.forEach(item=>{
                if (item.name == gradeId || item.id == gradeId) dic = item.children
              })
              this.$refs.crud.updateDic('classCode',dic)
            }
          },
          {
            prop: 'classCode',
            label: '班级',
            type: 'select',
            overHidden: true,
            minWidth: 60,
            maxlength: 200,
            span: 24,
            props: {
              label: "name",
              value: "id",
            },
          },
          {
            prop: 'streetDistrictCode',
            label: '学生居住地区划（乡镇）',
            type: 'tree',
            overHidden: true,
            minWidth: 60,
            maxlength: 200,
            disabled: true,
            span: 24,
            dicUrl: "/t-district/findTree",
            props: {
              label: "districtName",
              value: "districtCode",
            },
          },
          {
            prop: 'communityDistrictCode',
            label: '学生居住地区划(村社区）',
            type: 'tree',
            overHidden: true,
            minWidth: 60,
            disabled: true,
            maxlength: 200,
            span: 24,
            dicUrl: "/t-district/findTree",
            props: {
              label: "districtName",
              value: "districtCode",
            },
          },
          {
            prop: 'wantNumber',
            label: '需专线运送数最',
            type: 'number',
            overHidden: true,
            minWidth: 60,
            maxlength: 200,
            span: 24,
            min:0,
          },
          {
            prop: 'noWantNumber',
            label: '不需专线运送数最',
            type: 'number',
            overHidden: true,
            minWidth: 60,
            maxlength: 200,
            min:0,
            span: 24,
          },
        ],
        // delBtn: u.buttonPermissionsCheck("SYS_ROLE_DEL"),
      }
    }
  },
  components: {
    treeCom: treeCom,
    studentCountAdd: studentCountAdd
  },
  methods: {
    addCount() {
      return this.$refs.studentCountAdd.openDia();
    },
    treeClick(node) {
      this.checkTreeNode = node;
      delete this.searchForm.districtCode;
      delete this.searchForm.schoolCode;
      delete this.searchForm.gradeCode;
      delete this.searchForm.classCode;
      if (node.type == "districtCode") this.$set(this.searchForm, 'districtCode', node.districtCode)
      if (node.type == 'schoolCode')  this.$set(this.searchForm, 'schoolCode', node.schoolCode)
      if (node.type == 'gradeCode') this.$set(this.searchForm, 'gradeCode', node.id)
      if (node.type == 'classCode') this.$set(this.searchForm, 'classCode', node.classCode)
      this.getList();
    },
    getSchoolListFromTree(districtCode) {
      this.changeNode.schoolList = [];
      let schoolList = this.changeNode.schoolList;
      function forTree (treeList) {
        treeList.forEach(item => {
          if (item.type == 'schoolCode') {
            console.log(item.type);
            schoolList.push(item);
          }
          if (item.children && item.children?.length > 0) {
            forTree(item.children)
          }
        })
      }
      forTree(districtCode)
    },
  },
  mounted() {
    this.$HttpService.get(`/t-school/findDistrictSchoolClassTree`).then(res => {
        this.treeData = res;
        this.getSchoolListFromTree(res)
    })
  }
}
</script>

<template>
  <div class="out">
    <div class="left">
      <tree-com @clickNode="treeClick"></tree-com>
    </div>
    <div class="right">
      <avue-crud :ref="ref"
                 v-model="form"
                 :page="page"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 :before-open="beforeOpen"
                 @on-load="getList"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @size-change="sizeChange"
                 @current-change="currentChange"
                 @row-update="handleUpdate"
                 @row-save="handleSave"
                 @row-del="rowDel">
        <template slot="menuLeft" slot-scope="menuLeft">
          <el-button type="primary" size="small" @click="addCount">学生出行统计信息填报</el-button>
        </template>
        <template slot="districtCode" slot-scope="scope">
          <span>{{scope.row.schoolDistrictName}}</span>
        </template>
        <template slot="classCode" slot-scope="scope">
          <span>{{scope.row.className}}</span>
        </template>
      </avue-crud>
    </div>
    <student-count-add ref="studentCountAdd" :schoolMsg="checkTreeNode" @addSuccess="getList"></student-count-add>
  </div>
</template>

<style scoped lang="scss">
.out {
  display: flex;
  justify-content: space-between;

  .left {
    width: 250px;
  }

  .right {
    width: calc(100% - 300px);
  }
}

</style>